<template>
<div class="recommend">
  <ul>
    <li v-for="(item ,index) in recommendList" :key="index">
      <a :href="item.link" class="recommend-link">
        <img :src="item.image" alt="">
        <p class="recommend-title">{{ item.title }}</p>
      </a>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    recommendList: {
      type: Array,
      dafault () {
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style lang="less" scoped>
/* @import ''; 引入css类 */
// @import 'assets/css/base.css';

.recommend {
  padding: 10px 0 10px;
  border-bottom: 10px solid #eee;
  ul {
    display: flex;
    // justify-content: center;
    // align-items: center;
    text-align: center;
    li {
      flex: 1;
      a {
        display: block;
        padding: 0 10%;
        img {
          display: block;
          width: 80%;
          margin: 0 auto;
        }
        .recommend-title {
          padding-top: 8px;
          box-sizing: border-box;
        }
      }
    }
  }
}

</style>
